<template>
    <ul class="prolist">
        <li class="proitem" v-for="item of prolist" :key="item.proid" @click="toDetail(item.proid)">
            <div class="itemimg">
                <img :src="item.proimg" alt="">
                <p class="proDesc">{{ item.desc }}</p>
            </div>
            <div class="iteminfo">
                <p class="proName">{{ item.name }}</p>
                <p class="price">￥{{ item.price }}
                    <span class="iconfont icon-gouwuche gwc" @click.stop="add(item.proid)"></span>
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
import { addCart } from '@/api'
Vue.use(Toast)
export default {
  props: {
    prolist: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    toDetail (proid) {
      console.log(proid)
      // this.$router.push('/detail/' + proid)
      // this.$router.push({ name: 'detail', params: { proid } })
      this.$router.push({ path: '/product/' + proid })
    },
    add (a) {
      // 判断用户是不是登陆状态
      const b = event
      console.log(b)
      if (localStorage.getItem('loginState') === 'ok') {
        // 登陆
        addCart({
          userid: localStorage.getItem('userid'),
          proid: a,
          num: 1
        }).then(res => {
          const { code } = res.data
          if (code === '200') {
            Toast('加入购物车成功')
          } else if (code === '10101') {
            Toast('加入失败')
          }
        })
      } else {
        // 未登录
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.prolist {
  @include rect(100%, 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .proitem {
    @include rect(45%,2.6rem);
    // @include flexbox();
    // @include box-sizing(border-box);
    margin-top: 0.08rem;
    border-radius: 5px;
    @include background-color(white);
    .itemimg {
      @include rect(100%, 60%);
      img {
        @include rect(100%, 90%);
        @include display(block);
        @include border(1px, #ccc, solid);
        @include box-sizing(border-box);
        border-radius:5px 5px 0 0;
      }
      .proDesc{
        @include rect(100%, 0.24rem);
        @include background-color(#d9c07d);
        @include color(white);
        @include font-size(0.12rem);
        @include text-align(center);
        line-height: 0.24rem;
      }
    }
    .iteminfo {
      @include text-align(left);
      margin-left: 0.08rem;
      margin-top: 0.2rem;
      .gwc{
        @include font-size(0.23rem);
        @include color(#30d2bd);
        @include text-align(right);
        margin-left: 0.8rem;
      }
      .proName{
        @include font-size(0.12rem);
      }
      .price{
        @include font-size(0.14rem);
        @include color(#de3e26);
        margin-top: 0.2rem;
      }
    }
  }
}
</style>
